<template>
    <div class="grid">
        <h3 class="title">{{title}}</h3>

        <el-form :inline="true" :model="formData" class="form-search" size="small">
            <el-form-item label="来源:">
                <el-input v-model="formData.source" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item label="责任人:">
                <el-input v-model="formData.main_people" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item label="当前处理人:">
                <el-input v-model="formData.current_dealers" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
                <el-select v-model="formData.state" filterable style="width: 100px">
                    <el-option v-for="item in state_list" :key="item.value" :label="item.label" :value="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="任务描述:">
                <el-input v-model="formData.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-d-caret" @click="extendOptions">扩展条件</el-button>
            </el-form-item>
            <el-collapse-transition>
                <div v-show="showExtendOptions">
                    <el-form-item label="期望启动时间:">
                        <el-date-picker v-model="formData.suppose_start_time" type="daterange" start-placeholder="起始" end-placeholder="截至" range-separator="~"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="期望结束时间:">
                        <el-date-picker v-model="formData.suppose_end_time" type="daterange" start-placeholder="起始" end-placeholder="截至" range-separator="~"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="实际完成时间:">
                        <el-date-picker v-model="formData.finish_time" type="daterange" start-placeholder="起始" end-placeholder="截至" rang-separator="~"></el-date-picker>
                    </el-form-item>
                </div>
            </el-collapse-transition>
        </el-form>
        <div class="tools">
            <el-button class="el-icon-search" size="small" @click="search"> 查询</el-button>
            <el-button class="el-icon-menu" size="small" @click="getAll"> 全部</el-button>
            <el-button type="success" class="el-icon-upload" size="small" @click="exportExcel"> 导出筛选结果(CSV)</el-button>
            <el-button type="primary" size="small" @click="createGrid">新建</el-button>
        </div>
           

		<datatable :curPage="curPage" :pageSize="pageSize" :options="options" :pageNum="pageNum" :tableHeader="tableHeader" @pageChange="getGridData"
        ></datatable>
    </div>
</template>

<script>
export default {
    name: 'grid',
    data() {
        return {
            title: '任务列表',
            state_list: [ 
                { label: 'Open', value: '1' },
                { label: 'Close', value: '2' },
                { label: 'Suspend', value: '3'}
            ],
            formData: {
                name: '',
                main_people: '',
                description: '',
                suppose_start_time: '',
                suppose_end_time: '',
                level: '',
                product: '',
                source: '',
                type: '',
                property: '',
                keep_word: '',
                state: 1,
                enclosure: '',
                current_dealers: 'a;b',
                delay: 2,
                operation: ''
            },
            showExtendOptions: false,
			tableHeader: [
                { prop: 'th_name', label: '任务名称'},
                { prop: 'th_relation_team', label: '相关组'},
                { prop: 'th_description', label: '任务描述', width: '150'},
                { prop: 'th_code_count', label: '代码量', width: '150'},
                { prop: 'th_source', label: '任务来源'},
                { prop: 'th_reponsible', label: '责任人(多人用、分隔)'},
                { prop: 'th_dealers', label: '当前处理人', width: '80'},
                { prop: 'th_state', label: '状态', width: '80'},
                { prop: 'th_suppose_start_time', label: '期望开始时间', type: "time", width: '180'},
                { prop: 'th_suppose_end_time', label: '期望完成时间', type: "time", width: '180'},
                { prop: 'th_finish_time', label: '实际完成时间', type: "time", width: '180'},
                { prop: 'th_level', label: '优先级'},
                { prop: 'th_source', label: '来源'},
                { prop: 'th_type', label: '类型'},
                { prop: 'th_property', label: '属性'},
                { prop: 'th_keep_word', label: '对外承诺'},
                { prop: 'th_state', label: '状态'},
                { prop: 'th_log', label: '日志'},
                { prop: 'th_current_dealers', label: '当前处理人'},
                { prop: 'th_delay', label: '延期'},
                { prop: 'th_enclosure', label: '附件'},
                { prop: 'th_operation', label: '操作'},
			],
            tableData: {},
            options: [],
            curPage: 1,
            pageSize: 10,
            pageNum: 0,
            searchData: {},
        }
    },
    methods: {
        extendOptions() {
            this.showExtendOptions = !this.showExtendOptions;
        },
        createGrid() {
            this.$router.push('createGrid');
        },
        search() {
            this.tableData = [];    // 清除存储数据
            this.curPage = 1;
            this.searchData = JSON.parse(JSON.stringify(this.formData));
            this.getGridData()
        },
        getGridData(num, size) {
            if(num) {
                this.curPage = num;
                this.pageSize = size;
            }
            if(!this.tableData[this.curPage]) { // tableData 中没有存储
                this.$api.getGridList(this.curPage, this.pageSize, this.searchData).then(res=>{
                    if(res.code === 0) {
                        this.$set(this.tableData, this.curPage, res.list)   // 将请求过的数据存储在 tableData 中
                        this.pageNum = res.pageNum;
                        this.options = this.tableData[this.curPage]
                    }
                })
            }else { // tableData 中有存储
                this.options = this.tableData[this.curPage]
            }
        },
        getAll() {  // 获取全部数据
            this.searchData = {};   // 清除搜索条件
            this.tableData = [];
            this.curPage = 1;
            this.getGridData()
        },
        exportExcel(){
            this.$api.exportExcel(this.searchData).then(res => {
                console.log(res);
                var url =  "http://localhost:8080/files/grid.xlsx";
                window.location = url;
            })
        }
    },
    created(){
        this.getGridData()
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.grid {
    padding: 0 40px;

    h3.title{
        font-size: 24px;
        color: #045fbb;
        line-height: 100px;
    }

    .tools {
        vertical-align: top;

        button {
            margin-bottom: 20px;
        }
    }
}
.showExtendOptions-enter-active {
      transition: all .3s;
} 
.showExtendOptions-leave-active {
      transition: all .3s;
}
.showExtendOptions-enter, .showExtendOptions-leave-to{
      transform: translate(-30px, 0);
      opacity: 0;
}
</style>